<template>
  <div>
    <el-container >
      <el-aside
          v-show="isCollapse"
       width="8em">
        <!--            <h5>默认颜色</h5>-->
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :router="true"
        >
            <el-menu-item index="1-1" :route="{path:'/set/user_set'}" >
              <i class="el-icon-map-location"></i>
              <span>用户信息</span>
            </el-menu-item>
            <el-menu-item index="1-2" :route="{path:'/set/feature_set'} " v-if="isAdmin()">
              <i class="el-icon-map-location"></i>
              <span>编辑地图</span>
            </el-menu-item>
            <el-menu-item index="1-3" :route="{path:'/set/VisionInfo'} ">
              <i class="el-icon-map-location"></i>
              <span>信息</span>
            </el-menu-item>
        </el-menu>

      </el-aside>
      <el-container>

        <el-main>
          <el-button
              @click="isCollapse = !isCollapse"
              :icon=" isCollapse?'el-icon-s-fold':'el-icon-s-unfold'">
          </el-button>
          <el-button icon="el-icon-s-home" @click="$router.push('/')"></el-button>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "set",
  data(){
    return{
      isCollapse:true
    }
  },
  computed: {
    ...mapState({
      storeAuthorities: (state) => state.user.authorities,
    })
  },
  mounted() {
    this.$store.dispatch("authorities");
  },
  methods: {
    isAdmin(){
      var flag = this.storeAuthorities.indexOf('admin')>-1
      return flag
    }
  }
}
</script>

<style scoped>

</style>